<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>专家示例测试</span>
      </div>
      
      <el-button type="primary" @click="testExpertExamples">测试专家示例功能</el-button>
      
      <div v-if="testResult" style="margin-top: 20px;">
        <h3>测试结果：</h3>
        <el-tabs v-model="activeTab">
          <el-tab-pane label="单关示例" name="single">
            <div style="max-height: 300px; overflow-y: auto; padding: 15px; background-color: #f5f5f5; border-radius: 4px;">
              <pre style="white-space: pre-wrap; font-family: 'Courier New', monospace; line-height: 1.6;">{{ testResult.single_example || '暂无单关示例' }}</pre>
            </div>
          </el-tab-pane>
          <el-tab-pane label="二串一示例" name="double">
            <div style="max-height: 300px; overflow-y: auto; padding: 15px; background-color: #f5f5f5; border-radius: 4px;">
              <pre style="white-space: pre-wrap; font-family: 'Courier New', monospace; line-height: 1.6;">{{ testResult.double_example || '暂无二串一示例' }}</pre>
            </div>
          </el-tab-pane>
          <el-tab-pane label="三串一示例" name="triple">
            <div style="max-height: 300px; overflow-y: auto; padding: 15px; background-color: #f5f5f5; border-radius: 4px;">
              <pre style="white-space: pre-wrap; font-family: 'Courier New', monospace; line-height: 1.6;">{{ testResult.triple_example || '暂无三串一示例' }}</pre>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>

<script>
import { fetchExpertList } from '@/api/expert'

export default {
  name: 'TestExpertExamples',
  data() {
    return {
      testResult: null,
      activeTab: 'single'
    }
  },
  methods: {
    testExpertExamples() {
      fetchExpertList().then(response => {
        if (response.data.items && response.data.items.length > 0) {
          this.testResult = response.data.items[0]
          this.$notify({
            title: '成功',
            message: '获取专家示例成功',
            type: 'success',
            duration: 2000
          })
        } else {
          this.$notify({
            title: '提示',
            message: '暂无专家数据',
            type: 'warning',
            duration: 2000
          })
        }
      }).catch(() => {
        this.$notify({
          title: '错误',
          message: '获取专家数据失败',
          type: 'error',
          duration: 2000
        })
      })
    }
  }
}
</script>

<style scoped>
.box-card {
  margin-bottom: 20px;
}
</style>
